<template>
  <tabs v-model:active="active" class="List" background="#eeeeee">
    <tab title="推荐">
      <!-- <img src="../imgs/心心.png" alt=""> -->
      <grid :gutter="12" :column-num="2">
        <grid-item v-for="i in alls" :key="i.id" :to="{ name: 'Detail', query: {id: i.id}}">
          <Image :src="i.picture" />
          <!-- <Icon class="like" name="like"  @click="color='pink'"></Icon> -->
          <div ref="like" class="like"  @click.stop="likeHandle(i.id)">
            <img v-show="!isLike" src="../imgs/心心.png" alt="">
            <img v-show="isLike" src="../imgs/心11.png" alt="">
            <!-- <Image
              src="../imgs/心心.png"
              v-show="!isLike"
            ></Image>
            <Image
              src="../imgs/心11.png"
              v-show="isLike"
            ></Image> -->
          </div>
          <p>{{ i.homestaysName }}</p>
          <p>￥{{ i.price }} {{ i.roomType }} {{ i.personNumber }}人</p>
        </grid-item>
      </grid>
    </tab>
    <tab title="山景房"
      ><grid :gutter="12" :column-num="2">
        <grid-item v-for="i in listOne">
          <Image :src="i.picture" />
          <!-- <Icon class="like" name="like"  @click="color='pink'"></Icon> -->
          <div ref="like" class="like" @click.stop="likeHandle(i.id)">
            <img v-show="!isLike" src="../imgs/心心.png" alt="">
            <img v-show="isLike" src="../imgs/心11.png" alt="">
            
          </div>
          <p>{{ i.homestaysName }}</p>
          <p>￥{{ i.price }} {{ i.roomType }} {{ i.personNumber }}人</p>
        </grid-item>
      </grid></tab
    >
    <tab title="山水古镇"> 
      <grid :gutter="12" :column-num="2">
        <grid-item v-for="i in listTwo" :key="i.id" :to="{ name: 'Detail', query: {id: i.id}}">
          <Image :src="i.picture" />
          <!-- <Icon class="like" name="like"  @click="color='pink'"></Icon> -->
          <div ref="like" class="like" @click.stop="likeHandle(i.id)">
            <img v-show="!isLike" src="../imgs/心心.png" alt="">
            <img v-show="isLike" src="../imgs/心11.png" alt="">
            
          </div>
          <p>{{ i.homestaysName }}</p>
          <p>￥{{ i.price }} {{ i.roomType }} {{ i.personNumber }}人</p>
        </grid-item>
      </grid></tab>
    <tab title="格调小院"></tab>
  </tabs>
</template>
<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { list } from "postcss";
import { Tab, Tabs, Grid, GridItem, Image, Icon } from "vant";
import { getList} from "../utils/api";
import { collectHotelAPI, loadDetailAPI } from "../services/hotel";
const lists = ref([]);
const listOne = ref([]);
const listTwo = ref([]);
const alls  =ref();


getList().then((res) => {
  lists.value = res.data;
  alls.value = res.data.map((i)=>({...i,chk:false}))
  console.log(alls)
  listOne.value = res.data.filter((i) => i.homestaysTitle == "山景房");
  listTwo.value = res.data.filter((i) => i.homestaysTitle == "山水古镇");
  console.log(res.data);
});

const route = useRoute();
let isShow = ref(true);
const id = ref([])
const hid=ref()
let status = ref(1)
const like = ref()

const isLike = ref()
const  likeHandle = async (id) => {
  if(status.value==2){
    status.value =1;
  }else if(status.value==1){
    status.value=2;
  }

  // collectHotel(hid,status)
  let formData = new FormData()
  formData.append("hid",id);
  formData.append("status",status.value);
  
  const is = await collectHotelAPI(formData);
  console.log(is.data)
  isLike.value=is.data;
  
  /* isShow.value = !isShow.value;
  const h= lists.value.find((item)=>item.id==id);
  console.log(h) */
};

//跳转详情页
/* const toDetail = (id) =>{
  router.push({
    name:'Detail',
    query:{
      id,
    }
  }) */
</script>
<style scoped>
.List {
  width: 100vw;
  margin: auto;
  /* margin-top: 3%; */
}
van-grid-item {
  position: relative;
}
.like {
  position: absolute;
  top: 12%;
  left: 5%;
}
</style>
